import { BasicColumn, FormSchema } from '@apps/antd-admin/src/components/table';
import { render } from '@apps/antd-admin/src/hooks/render/renderUtils';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';

export const columns: BasicColumn[] = [
  {
    title: '类别名称',
    dataIndex: 'categoryName',
    width: 200,
  },
  {
    title: '类别图标',
    dataIndex: 'categoryIcon',
    width: 80,
    customRender: render.renderImage,
  },
  {
    title: '是否展示',
    dataIndex: 'isShow',
    width: 200,
    customRender: ({ record }: Recordable) => {
      const isShow = record.isShow;
      const color = isShow == 1 ? 'green' : 'orange';
      const text = isShow == 1 ? '展示' : '不展示';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '排序',
    dataIndex: 'sort',
    width: 200,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 200,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'categoryName',
    label: '名称',
    component: 'Input',
  },
  {
    field: 'isShow',
    label: '是否展示',
    component: 'Select',
    componentProps: {
      options: [
        { label: '不展示', value: 2 },
        { label: '展示', value: 1 },
      ],
    },
  },
];

export const formSchema: FormSchema[] = [
  {
    label: '类别Id',
    field: 'categoryId',
    component: 'Input',
    required: false,
    show: false,
  },
  {
    label: '类别名称',
    field: 'categoryName',
    component: 'Input',
    required: true,
  },
  {
    label: '类别图标',
    field: 'categoryIcon',
    component: 'ImageUpload',
  },
  {
    label: '跳转地址',
    field: 'categoryUrl',
    component: 'Input',
    required: false,
  },
  {
    label: '是否展示',
    field: 'isShow',
    component: 'Select',
    required: true,
    defaultValue: 1,
    componentProps: {
      options: [
        { label: '不展示', value: 2 },
        { label: '展示', value: 1 },
      ],
    },
  },
  {
    label: '排序',
    field: 'sort',
    component: 'InputNumber',
    required: true,
  },
];
